import { ReactNode } from "react";
import { StyleProp, ViewStyle, TextStyle } from "react-native";

/**
 * 菜单项配置接口
 * 定义单个菜单项的属性和行为
 */
export interface MenuItemProps {
  /** 菜单项唯一标识（必填） */
  id: string;

  /** 菜单项显示文本（必填） */
  label: string;

  /** Ionicons 图标名称，如 'trash-outline'、'share-social' 等 */
  icon?: string;

  /** 图标颜色，默认为 "#555" */
  iconColor?: string;

  /** 文本颜色，默认为 "#333" */
  textColor?: string;

  /** 是否禁用菜单项，禁用时不可点击，默认为 false */
  disabled?: boolean;

  /** 点击菜单项时的回调函数 */
  onPress?: () => void;
}

/**
 * 菜单位置枚举
 * 定义菜单相对于触发元素的显示位置
 */
export enum MenuPosition {
  /** 自动计算最佳位置（默认值） */
  AUTO = "auto",

  /** 菜单显示在触发点上方 */
  TOP = "top",

  /** 菜单显示在触发点下方 */
  BOTTOM = "bottom",

  /** 菜单显示在触发点左侧 */
  LEFT = "left",

  /** 菜单显示在触发点右侧 */
  RIGHT = "right",

  /** 菜单显示在整个元素底部（常用于列表项） */
  ITEM_BOTTOM = "item_bottom",
}

/**
 * 上下文菜单组件属性接口
 * 定义ContextMenu组件的所有可配置属性
 *
 * @example
 * ```tsx
 * <ContextMenu
 *   items={[
 *     { id: 'edit', label: '编辑', icon: 'pencil-outline', onPress: handleEdit }
 *   ]}
 *   position={MenuPosition.ITEM_BOTTOM}
 *   onPress={handleItemClick}
 * >
 *   <TouchableComponent />
 * </ContextMenu>
 * ```
 */
export interface ContextMenuProps {
  /** 触发菜单的子元素（必填） */
  children: ReactNode;

  /** 菜单项配置数组（必填） */
  items: MenuItemProps[];

  /** 菜单关闭时的回调函数 */
  onClose?: () => void;

  /** 菜单打开时的回调函数 */
  onOpen?: () => void;

  /** 短按（点击，非长按）时的回调函数 */
  onPress?: () => void;

  /** 选择菜单项后是否自动关闭菜单，默认为 true */
  closeOnSelect?: boolean;

  /** 菜单容器的自定义样式 */
  menuStyle?: StyleProp<ViewStyle>;

  /** 菜单项的自定义样式 */
  menuItemStyle?: StyleProp<ViewStyle>;

  /** 菜单项文本的自定义样式 */
  menuItemTextStyle?: StyleProp<TextStyle>;

  /** 菜单相对于触发点的位置，默认为 AUTO */
  position?: MenuPosition;

  /** 菜单位置的额外偏移量，默认为 { x: 0, y: 0 } */
  positionOffset?: { x: number; y: number };

  /**
   * 自定义图标渲染函数，用于替代默认的Ionicons图标
   * @param name 图标名称
   * @param size 图标大小
   * @param color 图标颜色
   * @returns 渲染的图标组件
   */
  renderIcon?: (name: string, size: number, color: string) => ReactNode;

  /** 菜单的最大宽度（像素），默认为 280 */
  maxWidth?: number;

  /** 菜单的最小宽度（像素），默认为 150 */
  minWidth?: number;

  /** 菜单的背景颜色，默认为 "white" */
  backgroundColor?: string;

  /** 是否显示菜单阴影，默认为 true */
  showShadow?: boolean;
}
